//################################
// 版权所有：中国农业银行软件开发中心
// 系统名称：移动办公应用-手机版
// 文件名称：Radios.js
// 创建时间：2016年10月26日
// 创建人员：朱勇
// 功能说明：单选框组件
//################################

'use strict';

import React, {Component} from 'react';
import {
    View,
    Text,
    StyleSheet,
    TouchableWithoutFeedback
} from 'react-native';
import {
    Colors,
    FontSizes,
} from '../../common';


class Radios extends Component {
    constructor(props) {
        super(props);

        this.options=this.props.options;

        this.containerStyle={
            borderColor:this.props.color?this.props.color:Colors.green,
            borderWidth:1,
            width:this.props.width?this.props.width:this.options.length*80,
            height:this.props.height?this.props.height:32,
        }

        this.optionStyle={
            color:this.props.color?this.props.color:Colors.green,
            backgroundColor:this.props.color?this.props.color:Colors.green,
        }

        this.spliterStyle={
            borderRightColor:this.props.color?this.props.color:Colors.green,
            borderRightWidth:1,
            width:1,
            height:this.props.height?this.props.height:32,
        }
        
        this.itemSelected=new Array(this.options.length);
        for(let j=0;j<this.options.length;j++){
            this.itemSelected[j]=false;
            if(this.props.selectedOption&&this.props.selectedOption===this.options[j]){
                this.itemSelected[j]=true;
            }
        }
    }

    itemPressed(index,option) {
        this.props.itemPress && this.props.itemPress(index,option);
        for(let j=0;j<this.options.length;j++){
            this.itemSelected[j]=false;
            if(index===j||option===this.options[j]){
                this.itemSelected[j]=true;
            }
        }
        this.setState({});
    }

    getItems() {
        let radioItems = [];
        for (let i = 0;i < this.options.length;i++) {
            radioItems.push(
                <TouchableWithoutFeedback key={i} onPress={() => {this.itemPressed(i,this.options[i])}}>
                    <View style={[styles.itemView,{backgroundColor:this.itemSelected[i]?this.optionStyle.backgroundColor:Colors.white}]}>
                        <Text style={[styles.itemtext,{color:this.itemSelected[i]?Colors.white:this.optionStyle.color}]} allowFontScaling={true}>
                            {this.options[i]}
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
            );

            if (i < this.options.length - 1) {
                radioItems.push(
                    <View style={this.spliterStyle} />
                );
            }
        }

        return radioItems;
    }
    
    render() {
        return (
            <View style={[styles.container,this.containerStyle]}>
                {
                    this.getItems()
                }
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
    },
    itemView: {
        flex:1,
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'center',
    },
    itemtext: {
        fontSize:FontSizes.optionText,
        textAlign:'center',
    },
    optionsplitter: {
        borderRightWidth:FontSizes.spliterWidth,
        borderRightColor:Colors.soiMenuModalSpliter,
    },
});

export default Radios;